import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Brain,
  FileText,
  Shield,
  CheckCircle,
  TrendingUp,
  Users,
  Clock,
  Settings,
  BookText,
  AlertTriangle, // Added
  ThumbsDown, // New Icon
} from "lucide-react";

export default function KnowledgeOverview({
  templates = [],
  standards = [],
  safetyRiskPoints = [],
  emergencyMeasureTemplates = [],
  qualityIssueTemplates = [],
}) {
  // New prop
  const stats = {
    totalTemplates: Array.isArray(templates) ? templates.length : 0,
    totalStandards: Array.isArray(standards) ? standards.length : 0,
    totalRiskPoints: Array.isArray(safetyRiskPoints)
      ? safetyRiskPoints.length
      : 0,
    totalEmergencyMeasures: Array.isArray(emergencyMeasureTemplates)
      ? emergencyMeasureTemplates.length
      : 0,
    totalQualityIssues: Array.isArray(qualityIssueTemplates)
      ? qualityIssueTemplates.length
      : 0, // New stat
  };

  const statCards = [
    {
      title: "施工方法模板",
      value: stats.totalTemplates,
      icon: FileText,
      color: "blue",
      description: "可用的施工方法模板总数",
    },
    {
      title: "标准规范",
      value: stats.totalStandards,
      icon: BookText,
      color: "green",
      description: "已录入的标准规范总数",
    },
    {
      title: "危险点",
      value: stats.totalRiskPoints,
      icon: AlertTriangle,
      color: "orange",
      description: "已定义的危险点预控总数",
    },
    {
      title: "应急措施",
      value: stats.totalEmergencyMeasures,
      icon: Shield,
      color: "purple",
      description: "标准化的应急处置措施总数",
    },
    // {
    //   title: "质量通病", // New Stat Card
    //   value: stats.totalQualityIssues,
    //   icon: ThumbsDown,
    //   color: "red",
    //   description: "已收录的质量通病及防治措施",
    // },
  ];

  const getColorClasses = (color) => {
    const colors = {
      blue: "from-blue-500 to-blue-600 text-blue-600 bg-blue-50",
      green: "from-green-500 to-green-600 text-green-600 bg-green-50",
      orange: "from-orange-500 to-orange-600 text-orange-600 bg-orange-50",
      purple: "from-purple-500 to-purple-600 text-purple-600 bg-purple-50",
      red: "from-red-500 to-red-600 text-red-600 bg-red-50", // New color
    };
    return colors[color] || colors.blue;
  };

  return (
    <div className="space-y-6">
      {/* Statistics */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        {statCards.map((stat, index) => {
          const IconComponent = stat.icon;
          const colorClasses = getColorClasses(stat.color).split(" ");

          return (
            <Card
              key={index}
              className="relative overflow-hidden shadow-lg border-0 bg-white"
            >
              <div
                className={`absolute top-0 right-0 w-32 h-32 opacity-10 transform translate-x-8 -translate-y-8 rounded-full bg-gradient-to-br ${colorClasses[0]} ${colorClasses[1]}`}
              />

              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-sm font-medium text-gray-600 mb-1">
                      {stat.title}
                    </CardTitle>
                    <div className="text-3xl font-bold text-gray-900">
                      {stat.value}
                    </div>
                  </div>
                  <div
                    className={`p-3 rounded-xl ${colorClasses[3]} ${colorClasses[4]}`}
                  >
                    <IconComponent className={`w-6 h-6 ${colorClasses[2]}`} />
                  </div>
                </div>
              </CardHeader>

              <CardContent className="pt-0">
                <p className="text-xs text-gray-500">{stat.description}</p>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Recent Templates */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Brain className="w-5 h-5 text-blue-600" />
            最近更新的模板
          </CardTitle>
        </CardHeader>
        <CardContent>
          {!Array.isArray(templates) || templates.length === 0 ? (
            <div className="text-center py-8">
              <FileText className="w-12 h-12 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500">暂无施工方法模板</p>
            </div>
          ) : (
            <div className="space-y-3">
              {templates.slice(0, 5).map((template) => (
                <div
                  key={template.id || Math.random()}
                  className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                >
                  <div className="flex items-center gap-3">
                    <div className="w-10 ">
                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-5">
                        <Settings className="w-5 h-5 text-blue-600" />
                      </div>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-900 truncate">
                        {template.methodName || "未命名模板"}
                      </h4>
                      <p className="text-sm text-gray-500 line-clamp-2">
                        {template.description || "暂无描述"}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* System Health */}
      {/* <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="w-5 h-5 text-green-600" />
              知识库使用情况
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">模板使用率</span>
                <span className="text-sm font-medium">85%</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">平均查询响应</span>
                <span className="text-sm font-medium">0.2s</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">数据准确性</span>
                <span className="text-sm font-medium">99.8%</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Clock className="w-5 h-5 text-purple-600" />
              系统状态
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">知识库状态</span>
                <Badge className="bg-green-100 text-green-700">正常</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">数据同步</span>
                <Badge className="bg-green-100 text-green-700">已同步</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-600">最后更新</span>
                <span className="text-sm text-gray-500">2分钟前</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div> */}
    </div>
  );
}
